<template>
  <div class="main">
    <!-- ------------------------------------------------------------------------ -->
    <view class="margin-left-2px"
      >基本信息
      <nut-cell title="调度单号：" :desc="data.no" />
      <nut-cell title="调度状态：" :desc="data.flow.statusDesc" />
      <nut-cell title="出发时间：" :desc="data.departTime" />
      <nut-cell title="要求时间：" :desc="data.arriveTime" />
      <nut-cell title="运输方式：" :desc="data.transportType" />
      <nut-cell title="承运方：" :desc="data.carrier" />
      <nut-cell title="起始点：" :desc="data.start" />
      <nut-cell title="目的地：" :desc="data.end"
    /></view>
    <!-- ------------------------------------------------------------------------ -->
    <view class="margin-left-2px"
      >车辆司机信息
      <nut-cell title="车牌号" :desc="data.vehicle.plateNumber" />
      <nut-cell
        title="司机姓名"
        :desc="`${data.vehicle.driver1} ，${data.vehicle.driver2}，${data.vehicle.driver3}`"
    /></view>

    <!-- ----------------------------------  -------------------------------------- -->
    <view class="margin-left-2px">
      运输路线
      <nut-cell>
        <nut-steps direction="vertical" progress-dotw :current="data.signInNum">
          <nut-step
            v-for="(way, index) in data.way2"
            :key="index"
            :title="`${way.city.province}+${way.city.cityName}`"
          >
            <!-- 顺序 -->
            {{ index }}
            <template #content>

              <br />
              <br />
            </template>
          </nut-step>
        </nut-steps> </nut-cell
    ></view>
    <!-- ----------------------------货物信息----------------------------------- -->
    <!-- ------------------------------------------------------------------------ -->

    <view class="margin-left-2px">
      货物信息详情
      <div v-for="(item1, index) in data.cargoInfo" :key="index">
        <nut-table :key="index" :columns="columns" :data="item1.list" />
      </div>
    </view>
    <!-- ----------------------------异常信息-----------------------------------  -->
    <view class="margin-left-2px">
      <nut-cell
        title="异常信息"
        :desc="item.desc"
        v-for="(item, index) in data.abnormalData"
        :key="index"
    /></view>
    <!------------------------------------------------- ------------------------------------标签页 --->
    <nut-tabbar
      bottom
      safe-area-inset-bottom
      placeholder
      v-if="data.flow.status != 11"
    >
      <nut-tabbar-item style="background-color: red" @click="hander(0)">
        <view style="color: white">{{ data.flow.badFeedback }}</view>
      </nut-tabbar-item>
      <nut-tabbar-item style="background-color: blue" @click="hander(1)">
        <view style="color: white">{{ data.flow.goodFeedback }}</view>
      </nut-tabbar-item>
    </nut-tabbar>
  </div>
</template>
<script >
import { log } from "console";
import { getTaskDetail, updateWaybillTaskStatus } from "../../utils/api";
import { getCurrentInstance } from "@tarojs/taro";
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      columns: [
        {
          title: "货物名称",
          key: "name",
        },
        {
          title: "数量",
          key: "num",
        },
        {
          title: "数量单位",
          key: "numUnit",
        },
        {
          title: "重量",
          key: "weight",
        },
        {
          title: "重量单位",
          key: "weightUnit",
        },
        {
          title: "单价",
          key: "price",
        },
        {
          title: "价格单位",
          key: "priceUnit",
        },
      ],
      data: {
        flow: {},
        vehicle: {},
        way2: [],
        cargoInfo: [],
        foreignKeys: {},
      },
      longitude: "",
      latitude: "",
    };
  },
  methods: {
    hander(status) {
      let that = this;
      // 获取当前的经纬度
      Taro.getLocation({
        // 不同地图的引擎不一样，需要根据不同地图的引擎来选择
        //   type: "wgs84",//gps
        type: "gcj02", //腾讯的
        success: function (res) {
          console.log(res)
          // 跟新流程状态
          updateWaybillTaskStatus({
            params: {
              id: getCurrentInstance().router.params.id,
              flowStatus: status,
              longitude: res.longitude,
              latitude: res.latitude,
            },
          }).then((res) => {
            // 刷新
            getTaskDetail({
              params: { id: getCurrentInstance().router.params.id },
            }).then((res) => {
              that.data = res.data.data;
            });
          });
          ;
        },
        fail: function (error) {
          reject(error); // 在获取位置信息失败时，通过 reject 抛出错误，供 catch 方法捕获
        },
      });
    },
  },
  beforeMount() {
    getTaskDetail({
      params: { id: getCurrentInstance().router.params.id },
    }).then((res) => {
      console.log(res.data.data);
      this.data = res.data.data;
    });
  },
};
</script>
<style  scoped>
.margin-left-2px {
  margin-left: 20px;
}
.margin-height-200px {
  margin-top: 200px;
}

.supplies-card ::v-deep .nut-cell__title {
  -webkit-flex: 0;
}

.div-cell {
  position: relative;
  display: -ms-flexbox;
  width: 100%;
  line-height: var(--nut-cell-line-height, 1rem);
  background: var(--nut-cell-background, var(--nut-white, #fff));
  border-radius: var(--nut-cell-border-radius, 0.3rem);
  -webkit-box-shadow: var(
    --nut-cell-box-shadow,
    0rem 0.05rem 0.35rem 0rem rgb(229, 33, 37)
  );
  box-shadow: var(
    --nut-cell-box-shadow,
    0rem 0.05rem 0.35rem 0rem rgb(237, 238, 241)
  );
  font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 0.7rem));
  color: var(--nut-cell-color, var(--nut-title-color2, #666666));
  margin: 0.5rem 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main ::v-deep .nut-cell {
  display: "";
  padding: var(--nut-cell-padding, 0.65rem 0.8rem);
}
.main ::v-deep .nut-collapse-item__title {
  padding: var(--nut-collapse-item-padding, 0.65rem 0.8rem 0.65rem 1.3rem);
}
</style> 
  

